<template>
  <div style="height:100%">
    <div class="choice-box" style="position:relative">
      <van-row>
        <van-col span="8" @click="checkFlag()"><span :class="{'text-green' : flag == 1}">本周推荐</span></van-col>
        <van-col span="8" @click="show2Picker">{{show2text}}<van-icon name="arrow-down" /></van-col>
        <van-col span="8" @click="show3Picker">{{show3text}}<van-icon name="arrow-down" /></van-col>
      </van-row>
      <picker-view indicator-class="pickerCM" v-show="show2" mask-class="mk" class="pickerStyle" value="[6]" @change="selectPicker" >
        <div class="plviCM">
          <div :class="{'text-green' : show2id == null }" @click="checkfoodcate(null, '美食')"> 美食 </div>
          <div :class="{'text-green' : show2id == item.id }" v-for="(item,index) in foodcate" :key="index" @click="checkfoodcate(item.id, item.value)"> {{item.value}} </div>
        </div>
      </picker-view>
      <picker-view indicator-class="pickerCM" indicator-style="line-height: 30px;" v-show="show3" mask-class="mk" class="pickerStyle" value="[6]" @change="PickerNum" >
        <div class="plviCM">
          <div :class="{'text-green' : show3id == null }" @click="checkCater(null, '小聚')"> 小聚 </div>
          <div :class="{'text-green' : show3id == item.id }" v-for="(item,index) in catering" :key="index" @click="checkCater(item.id, item.value)"> {{item.value}} </div>
        </div>
      </picker-view>
    </div>
    <div class="pl-1 pr-1" v-if="shops.length > 0">
      <div class="shops-box" v-for="(item ,index) in shops" :key="index" @click="copyText(item.url)">
        <div class="infoImg" :style="{backgroundImage:'url(' + item.litpic + ')'}"></div>
        <div class="info">
          <div class="tit">{{item.shop_name}}</div>
          <div class="point">{{item.special ? item.special : ''}}</div>
          <div class="standard">
            <van-rate :value="item.star" size="14" readonly color="#ff3f00" />
          </div>
          <div class="range clearfix">
            <span class="fl">{{item.food_cate_name}}</span>
            <span class="fr">￥{{item.price}}/人</span>
          </div>
        </div>
      </div>
    </div>
    <div class="pl-1 pr-1" v-else>
      <div class="nodata">
        <van-row>
          <van-col span="24">
            <div class="notTXT">暂无数据</div>
          </van-col>
        </van-row>
      </div>
    </div>
    <van-popup class="showBomb" :overlay="true" @close="bombShow = false" :show="bombShow">
      <div class="clearfix">
        <div class="fl">温馨提示：</div><van-icon class="fr" name="cross" @click="bombShow = false" />
      </div>
      <div class="pb-2">
        <div class="text-center text-green" style="font-size:60px;">
          <van-icon name="passed" />
        </div>
        <div class="text-center ft-20 mt-2">
          <div>您的餐厅地址已复制链接，默认浏览器粘贴即可前往</div>
        </div>
      </div>
    </van-popup>
    <van-dialog id="van-dialog" />
  </div>
</template>
<script>
import {integral, views} from '../../utils/utils.js'
export default {
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 增加积分
      this.sharpePage(this.$root.$mp.query.id, 3)
    } else {
      this.sharpePage(this.$root.$mp.query.id, 4)
    }
    return {
      title: '聚餐厅',
      imageUrl: '/images/a.png',
      path: '/pages/restaurant_list/main'
    }
  },
  onPullDownRefresh () {
  },
  onReachBottom () {
    let page = this.page + 1
    this.getList(page, this.pagesize)
  },
  data () {
    return {
      show2: false,
      show3: false,
      show2id: 0,
      show3id: 0,
      show2text: '美食',
      show3text: '小聚',
      foodcate: [],
      catering: [],
      shops: [],
      Clipboard: '',
      bombShow: false,
      flag: 0,
      page: 1,
      pagesize: 5
    }
  },
  components: {
  },
  methods: {
    // 积分增加， 更新 分享、浏览 、转发数量，增加积分
    // type:share 更新分享数   views  更新浏览数 forwarding 更新转发数
    getIntegral (type = 2) {
      let _this = this
      let id = _this.$root.$mp.query.id
      // 增加积分
      integral(id, type)
      // 增加统计数量  views
      views(id, 'views')
    },
    // 1.签到 2.阅读文章 3.转发文章 4.分享小程序
    sharpePage (id, type = 3) {
      // 增加积分
      integral(id, type)
      // 增加统计数量 share
      views(id, 'share')
    },
    show2Picker () {
      this.show2 = !this.show2
      this.show3 = false
    },
    selectPicker (e) {
    },
    show3Picker () {
      this.show3 = !this.show3
      this.show2 = false
    },
    PickerNum (e) {
      let val = e.mp.detail.value
      console.log(val[0])
    },
    copyText: function (e) {
      let _self = this
      if (e == null || e === '') {
        return
      }
      wx.setClipboardData({
        data: e,
        success: function (res) {
          wx.getClipboardData({
            success: function (res) {
              _self.bombShow = true
              wx.showToast({
                // title: '复制链接在默认浏览器粘贴即可查询店铺',
                title: ' ',
                icon: 'none',
                duration: 0
              })
            }
          })
        }
      })
    },
    // 口味
    checkfoodcate (id, text) {
      this.show2 = false
      this.flag = 0
      this.show2id = id
      this.show2text = text
      this.getList()
    },
    // 人数
    checkCater (id, text) {
      this.show3 = false
      this.flag = 0
      this.show3id = id
      this.show3text = text
      this.getList()
    },
    // 本周推荐
    checkFlag () {
      this.show3 = false
      this.show2 = false
      this.show2id = 0
      this.show2text = '美食'
      this.show3id = 0
      this.show3text = '小聚'
      this.flag = this.flag === '1' ? '0' : '1'
      this.getList()
    },
    getList (page = this.page, pagesize = this.pagesize) {
      let _this = this
      wx.request({
        url: _this.apiUrl + 'api/shops/list?type=jurenwu&page=' + page + '&pagesize=' + pagesize,
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          'food_cate': _this.show2id,
          'catering_number': _this.show3id,
          'flag': _this.flag
        },
        success (res) {
          let data = res.data
          if (data.code === 200) {
            wx.stopPullDownRefresh()
            if (page > 1) {
              // 数据追加
              _this.shops.push(...data.data)
              _this.page = _this.page + 1
            } else {
              _this.shops = data.data
            }
          }
        }
      })
    }
  },
  mounted () {
    this.getList()
  },
  created () {
    let _this = this
    wx.request({
      url: this.apiUrl + 'api/shops/catering',
      success (res) {
        let data = res.data
        if (data.code === 200) {
          _this.catering = data.data
        }
      }
    })
    wx.request({
      url: this.apiUrl + 'api/shops/foodcate',
      success (res) {
        // console.log(res)
        let data = res.data
        if (data.code === 200) {
          _this.foodcate = data.data
        }
      }
    })
  }
}
</script>
<style>
.pickerCM {
  height: 50px;
}
.plviCM {
  background-color: #fff;
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
  border-top: #efefef 1px solid;
  border-bottom: #efefef 1px solid;
}
.pickerStyle {
  width: 100%;
  display: block;
  position: absolute;
  top: 40px;
  z-index: 100;
}
.choice-box{
  height:40px;
  line-height: 40px;
  font-size: 16px;
  color: #000;
  text-align: center;
  border-bottom:#efefef 1px solid;
}
/*选择*/
.selec-box{
  text-align:center;
}
.selec-box .option{
  height: 35px;
  line-height: 35px;
  font-size: 16px;
  border-bottom: #efefef 1px solid;
}
/*商铺*/
.shops-box{
  height: 110px;
  background-color: #fff;
  position: relative;
  border-bottom: #efefef 1px solid;
}
.shops-box .infoImg{
  width: 90px;
  height: 90px;
  position: absolute;
  top: 10px;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}
.shops-box .point{
  color: #ff3f00;
  height: 16px;
  line-height: 16px;
  word-wrap:break-word;
  word-break:break-all;
  overflow: hidden;
  text-overflow: ellipsis; 
  display:-webkit-box; 
  -webkit-line-clamp: 1; 
  -webkit-box-orient: vertical;
}
.shops-box .info{
  font-size: 14px;
  padding: 10px 10px 10px 100px;
}
.shops-box .info .tit{
  font-size: 17px;
  font-weight: 500;
  line-height: 28px;
  color:#333;
  word-wrap:break-word;
  word-break:break-all;
  overflow: hidden;
  text-overflow: ellipsis; 
  display:-webkit-box; 
  -webkit-line-clamp: 1; 
  -webkit-box-orient: vertical;
}
.shops-box .info .standard{
  margin-top:6px;
  position: relative;
  left: -1px;
}
.shops-box .info .standard .van-rate__item{
  padding: 0
}
.shops-box .info .range{
  margin-top:4px;
  font-size: 15px;
  color: #999;
}
/* 弹框 */
.showBomb .van-popup{
  width: 90%;
  padding:10px;
  border-radius: 6px;
  line-height: 24px;
}
</style>
